<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员卡</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/finance.css">
</head>
<body>
<div id="uniocn" class="layui-layout layui-layout-admin">

    <div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
        <button class="layui-btn layui-btn-ms">商户列表</button>
    </div>
    <div class="applyList">
        <form action="##" class="layui-form">
            <div style="display: flex;justify-content: space-between;">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <select name="" id="">
                            <option value="">关键字类型</option>
                            <option value="">临</option>
                            <option value="">兵</option>
                            <option value="">斗</option>
                            <option value="">者</option>
                            <option value="">皆</option>
                            <option value="">阵</option>
                            <option value="">列</option>
                            <option value="">在</option>
                            <option value="">前</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="display: flex;">
                        <input class="layui-input" type="text" placeholder="请输入关键字">
                        <button class="layui-btn layui-btn-primary ">搜索</button>
                        <button class="layui-btn layui-btn-primary">导出</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div style="box-sizing: border-box;padding: 15px;background: #fff;margin-top: 15px">
        <table class="layui-table">
            <colgroup>
                <col width="15%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
            </colgroup>
            <tr>
                <th>持卡人信息</th>
                <th>用户电话</th>
                <th>开通时间</th>
                <th>用户状态</th>
                <th>用户等级</th>
                <th>失效时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in list">
                <td>
                    <div>
                        <img class="list-userImg" :src="item.img" alt="">-
                        <span>{{item.user}}</span>
                    </div>
                </td>
                <td>
                    <span>{{item.phone}}</span>
                </td>
                <td>
                    <span>{{item.startTime}}</span>
                </td>
                <td>
                    <button class="layui-btn layui-btn-sm">使用中</button>
                </td>
                <td>
                    <span>{{item.manage}}</span>
                </td>
                <td>
                    <span>{{item.endTime}}</span>
                </td>
                <td>
                    <div class="operation">
                        <a href="javascript:;">编辑</a>
                        <a href="javascript:;">禁用</a>
                        <a href="javascript:;" @click="del(index)">删除</a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="js/vue2.5.16.js"></script>
<script src="js/public.js"></script>
<script src="js/data.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
    });
    new Vue({
        el: "#uniocn",
        data: {
            header: data.header,
            side: data.side,
            list: [
                {
                    img: "./images/userImg.png",
                    user: "熊猫生活",
                    phone: "19633332222",
                    startTime: "2018-08-15 12:00:00",
                    endTime: "2018-08-15 12:00:00",
                    states: true,
                    manage: "默认等级",
                }, {
                    img: "./images/userImg.png",
                    user: "熊猫生活",
                    phone: "19633332222",
                    startTime: "2018-08-15 12:00:00",
                    endTime: "2018-08-15 12:00:00",
                    states: true,
                    manage: "默认等级",
                }, {
                    img: "./images/userImg.png",
                    user: "熊猫生活",
                    phone: "19633332222",
                    startTime: "2018-08-15 12:00:00",
                    endTime: "2018-08-15 12:00:00",
                    states: true,
                    manage: "默认等级",
                },
            ]
        },
        methods: {
            del: function (index) {
                var that = this;
                layer.confirm('确认删除吗？', {
                    btn: ['确认', '取消']
                }, function () {
                    that.list.splice(index, 1)
                    layer.msg('删除成功', {icon: 1})
                }, function () {
                    layer.msg('删除取消')
                })
            }
        }
    })
</script>
</html>